<!--
  文件描述：dialog 二次封装
  创建时间：2023/9/7 13:15
  创建人：二
-->
<template>
  <el-dialog
    :title="title"
    :width="width"
    :visible="visible"
    :show-close="showClose"
    :close-on-press-escape="closeOnPressEscape"
    :close-on-click-modal="closeOnClickModal"
    :destroy-on-close="true"
    :append-to-body="appendToBody"
    :center="center"
    custom-class="custom-dialog"
    :before-close="beforeClose"
  >
    <template #title>
      <slot name="title"></slot>
    </template>
    <m-loading :loading="loading">
      <slot></slot>
    </m-loading>
    <template #footer>
      <slot name="footer"></slot>
    </template>

  </el-dialog>
</template>

<script>
export default {
  name: 'MDialog',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    // 是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    /*Dialog 自身是否插入至 body 元素上
    嵌套的 Dialog 必须指定该属性并赋值为 true*/
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 是否对头部和底部采用居中布局
    center: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 关闭前的回调，会暂停 Dialog 的关闭
    beforeClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
// 对话框
::v-deep .custom-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
  }
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__footer {
    border-top: 1px solid #e9e9e9;
    padding-bottom: 10px;
  }
}
</style>
